import { ref } from "vue";
import type { GlobalThemeOverrides } from "naive-ui";
import { darkTheme } from "naive-ui";
import customTheme from "./themes/custom.json";

export type ThemeType = "light" | "dark" | "custom";

const currentTheme = ref<ThemeType>("dark");

export const themeOverrides = ref<GlobalThemeOverrides>({});

export function useTheme() {
  const setTheme = (theme: ThemeType) => {
    currentTheme.value = theme;
    switch (theme) {
      case "light":
        themeOverrides.value = {};
        break;
      case "dark":
        themeOverrides.value = darkTheme as unknown as GlobalThemeOverrides;
        break;
      case "custom":
        themeOverrides.value = customTheme;
        break;
    }
  };

  const getCurrentTheme = () => currentTheme.value;

  return {
    setTheme,
    getCurrentTheme,
    themeOverrides,
  };
}
